<template>
  <el-form ref="formRef" label-position="top" :model="props.formValue">
    <el-row :gutter="40">
      <el-col :span="span">
        <el-form-item prop="prop_id" :label="$t('goods_attribute.prop_id')">
          <el-input
            class="qf_input"
            v-model="modelValue.prop_id.value"
            @input="value => handlePrefixTrim('prop_id', value)"
            @change="value => handleTrim('prop_id', value)"
          />
        </el-form-item>
      </el-col>
      <el-col :span="span">
        <el-form-item prop="property_cn" :label="$t('goods_attribute.property_cn')">
          <el-input
            class="qf_input"
            v-model="modelValue.property_cn.value"
            @input="value => handlePrefixTrim('property_cn', value)"
            @change="value => handleTrim('property_cn', value)"
          />
        </el-form-item>
      </el-col>
      <el-col :span="span">
        <el-form-item prop="property" :label="$t('goods_attribute.property')">
          <el-input
            class="qf_input"
            v-model="modelValue.property.value"
            @input="value => handlePrefixTrim('property', value)"
            @change="value => handleTrim('property', value)"
          />
        </el-form-item>
      </el-col>
      <el-col :span="span">
        <el-form-item prop="property_en" :label="$t('goods_attribute.property_en')">
          <el-input
            class="qf_input"
            v-model="modelValue.property_en.value"
            @input="value => handlePrefixTrim('property_en', value)"
            @change="value => handleTrim('property_en', value)"
          />
        </el-form-item>
      </el-col>
      <el-col :span="span">
        <el-form-item prop="prop_type" :label="$t('goods_attribute.prop_type')">
          <el-select class="qf_select" v-model="modelValue.prop_type.value">
            <el-option v-for="option in modelValue.prop_type.options" :value="option.value" :label="option.label" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="span">
        <el-form-item prop="prop_sort_detail" :label="$t('goods_attribute.prop_sort_detail')">
          <el-input class="qf_input" v-number v-model="modelValue.prop_sort_detail.value" />
        </el-form-item>
      </el-col>
      <el-col :span="span">
        <el-form-item prop="sort_prop_detail_focal" :label="$t('goods_attribute.sort_prop_detail_focal')">
          <el-input class="qf_input" v-number v-model="modelValue.sort_prop_detail_focal.value" />
        </el-form-item>
      </el-col>
      <el-col :span="span">
        <el-form-item prop="prop_group" :label="$t('goods_attribute.prop_group')">
          <el-select class="qf_select" v-model="modelValue.prop_group.value">
            <el-option v-for="option in modelValue.prop_group.options" :value="option.value" :label="option.label" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="span">
        <el-form-item prop="prop_group_sort" :label="$t('goods_attribute.prop_group_sort')">
          <el-input class="qf_input" v-number v-model="modelValue.prop_group_sort.value" />
        </el-form-item>
      </el-col>
      <el-col :span="span">
        <el-form-item prop="is_required" :label="$t('goods_attribute.is_required')">
          <el-radio-group v-model="modelValue.is_required.value">
            <el-radio v-for="option in modelValue.is_required.options" :value="option.value" :label="option.label" />
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col v-if="props.type !== RouteType.industrial" :span="span">
        <el-form-item prop="is_spec" :label="$t('goods_attribute.is_spec')">
          <el-radio-group v-model="modelValue.is_spec.value">
            <el-radio v-for="option in modelValue.is_spec.options" :value="option.value" :label="option.label" />
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="span">
        <el-form-item prop="un_editable_checked" :label="$t('goods_attribute.un_editable_checked')">
          <el-radio-group v-model="modelValue.un_editable_checked.value">
            <el-radio v-for="option in modelValue.un_editable_checked.options" :value="option.value" :label="option.label" />
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="span">
        <el-form-item prop="display_filter" :label="$t('goods_attribute.display_filter')">
          <el-radio-group v-model="modelValue.display_filter.value">
            <el-radio v-for="option in modelValue.display_filter.options" :value="option.value" :label="option.label" />
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="span">
        <el-form-item prop="display_detail" :label="$t('goods_attribute.display_detail')">
          <el-radio-group v-model="modelValue.display_detail.value">
            <el-radio v-for="option in modelValue.display_detail.options" :value="option.value" :label="option.label" />
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="span">
        <el-form-item prop="display_detail_focal" :label="$t('goods_attribute.display_detail_focal')">
          <el-radio-group v-model="modelValue.display_detail_focal.value">
            <el-radio v-for="option in modelValue.display_detail_focal.options" :value="option.value" :label="option.label" />
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="span">
        <el-form-item prop="for_sku" :label="$t('goods_attribute.for_sku')">
          <el-radio-group v-model="modelValue.for_sku.value">
            <el-radio v-for="option in modelValue.for_sku.options" :value="option.value" :label="option.label" />
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import type { SearchDataType } from "../searchData";

import { ref, computed } from "vue";

import { useGlobalStore } from "@/stores/modules/global";

import { FormInstance, ElRow, ElCol, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElRadioGroup, ElRadio } from "element-plus";

import { RouteType } from "@/api/modules/goodsArchive/allocation";

const props = defineProps<{
  type: RouteType;
  formValue: Record<string, any>;
}>();

const modelValue = defineModel<Record<string, SearchDataType>>({ required: true });

const globalStore = useGlobalStore();

const formRef = ref<FormInstance>();

const span = computed(() => (globalStore.language === "zh" ? 6 : 8));

// 处理输入框开头空格
const handlePrefixTrim = (key: string, value: string) => {
  modelValue.value[key].value = value.replace(/^\s+/g, "");
};

// 处理输入框尾部空格
const handleTrim = (key: string, value: string) => {
  modelValue.value[key].value = value.trim();
};

defineExpose({
  reset: () => {
    Object.values(modelValue.value).forEach(item => {
      item.value = undefined;
    });
    const timer = requestAnimationFrame(() => {
      formRef.value?.clearValidate();
      cancelAnimationFrame(timer);
    });
  },
  valid: () => formRef.value?.validate()
});
</script>
